<template>
  <div class="OtaUpdate">
    <div class="page-head">
      <div class="page-bread">
        <div class="bread-prev" @click="back">
          OTA更新管理
        </div>
        <div class="bread-divider">
          /
        </div>
        <div class="bread-now">
          更新设备
        </div>
      </div>
    </div>
    <div class="page-body">
      <div class="coll-wrapper">
        <div v-for="item in tables" :key="item.id" class="coll-table">
          <div class="coll-title" @click="toggle(item)">
            <div class="tit">
              <img src="~assets/img/right_caret.png" class="caret" :class="{'rotated': item.opened}">
              <span class="txt">
                {{item.name}}
              </span>
            </div>
            <img v-if="item.status == '1'" src="~assets/img/checked.png" class="checked-img">
            <div class="coll-btn" @click.stop="groupIssue(item)">
              下发
            </div>
          </div>
          <div class="sub_table" v-show="item.opened">
            <el-table :data="tableData" stripe border :fit="true">
              
              <el-table-column
                prop="name"
                :show-overflow-tooltip="true"
                label="设备名称"
              >
              </el-table-column>

              <el-table-column
                prop="serial"
                label="设备识别号"
              >
              </el-table-column>
              <el-table-column
                label="上次升级时间"
                prop="time"
              >
              </el-table-column>

              <el-table-column
                prop="version_name"
                label="版本文件"
              >
              </el-table-column>
              <el-table-column
                prop="old_version"
                label="升级前版本"
              >
              </el-table-column>
              <el-table-column
                prop="new_version"
                label="升级后版本"
              >
              </el-table-column>

              <el-table-column
                prop="state"
                label="升级结果"
              >
                <template slot-scope="{ row }">
                  <div>
                    {{updateStates.find(s => s.key == row.state).value}}
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div class="page-footer">
      <pagina-tion
        class="page-pager"
        v-show="total >= 0"
        :background="true"
        :total="total"
        :offset.sync="offset"
        :limit.sync="limit"
        @pagination="getChangePage"
        @sizeChange="getSizePage"
      />
    </div>
  </div>
</template>

<script>
import * as api from "@/api";
import { updateStates } from "@/consts/codesMap";
import { limit } from "@/consts/consts";
import paginaTion from "@/components/libs/paginaTion";
export default {
  components:{
    paginaTion
  },
  data() {
    return {
      limit,
      total: 0,
      offset: 0,
      updateStates,
      tables: [],
      tableData: [],
      visable: false,
      list: [],
      value: [],
      filterMethod(query, item) {
        return item.label.indexOf(query) > -1
      },
      detailVisable: false,
      detailData: []
    }
  },
  methods: {
    back() {
      this.$router.go(-1)
    },

    toggle(table) {
      if (!table.opened) {
        this.groupDetail(table)
      }

      this.tables.forEach(item => {
        item.opened = item.id === table.id ? (!item.opened) : item.id === table.id
      })
      
    },

    open(item) {
      this.visable = true
    },

    detailClose() {
      this.detailVisable = false
    },

    cancel() {
      this.visable = false
    },

    getChangePage(val) {
      this.offset = val.offset;
      this.groupList()
    },
        
    getSizePage(val) {
      this.offset = 0
      this.groupList();
    },

    async groupList() {
      const { code, data, total } = await api.ota(this).groupList({
        offset: this.offset,
        limit: this.limit
      })
      if (code === 0) {
        this.tables = data.map(item => {
          item.opened = false
          return item
        })
        this.total = total
      }
    },
        
    async groupDetail({id}) {
      const { code, data } = await api.ota(this).groupDetail({
        version_id: this.$route.query.version_id,
        group_id: id
      })
      if (code === 0) {
        this.tableData = data
      }
    },
            
    async groupIssue({id}) {
      const { code } = await api.ota(this).groupIssue({
        version_id: this.$route.query.version_id,
        group_id: id
      })
      if (code === 0) {
        this.$message.success('操作成功！')
        this.cancel()
      }
    },
    
    // 详情列表
    async getList() {
      const { code, data, total } = await api.ota(this).getList({
        offset: 0,
        limit: -1,
      });
      if (code === 0) {
        this.detailData = data
      }
    },
  },
  created () {
    this.groupList()
  },
}
</script>

<style lang="stylus">
.OtaUpdate {
  
}
</style>